<template>
  <ul class="flex h-full m-0">
    <li class="h-full flex justify-center items-center cursor-pointer">
      <a-tooltip placement="bottom">
        <template #title>
          <p class="mb-0" v-show="!isFullScreen">全屏</p>
          <p class="mb-0" v-show="isFullScreen">退出全屏</p>
        </template>
        <div
          class="px-2 hover:bg-gray-100 h-full px-4 items-center flex enter-x dark-icon"
          @click="fullScreen"
        >
          <fullscreen-outlined v-show="!isFullScreen" class="text-lg text-stroke-true-gray-900" />
          <fullscreen-exit-outlined
            v-show="isFullScreen"
            class="text-lg text-stroke-true-gray-900"
          />
        </div>
      </a-tooltip>
    </li>
    <li class="h-full">
      <a-tooltip placement="bottom">
        <template #title>
          <p class="mb-0 cursor-pointer" @click="logout">
            <span><poweroff-outlined /> 退出登录</span>
          </p>
        </template>
        <div class="hover:bg-gray-100 px-4 items-center cursor-pointer flex h-full gap-2 dark-icon">
          <a-avatar size="small" class="enter-x">
            <template #icon><UserOutlined /></template>
          </a-avatar>
          <span class="enter-x"> {{ getUserName }} </span>
        </div>
      </a-tooltip>
    </li>
    <li class="h-full cursor-pointer enter-x" @click="openSetting">
      <a-tooltip placement="bottom">
        <template #title>
          <p class="mb-0">
            <span>设置</span>
          </p>
        </template>
        <div class="hover:bg-gray-100 px-4 items-center flex h-full dark-icon">
          <setting-outlined class="text-lg" />
        </div>
      </a-tooltip>
    </li>
  </ul>
  <a-drawer
    v-model:visible="visible"
    class="custom-class"
    title="设置"
    placement="right"
    :forceRender="true"
  >
    <main class="w-full flex flex-col items-center justify-center gap-5">
      <div class="flex flex-col gap-2 justify-center items-center">
        <span class="text-dark-900 text-lg dark:text-light-100">主题</span>
        <use-switch></use-switch>
      </div>
      <a-button type="primary" danger @click="logout">退出登录</a-button>
    </main>
  </a-drawer>
</template>

<script setup lang="ts">
  import { useUserInfoStoreWithOut } from '@/stores/modules/userInfo';
  import {
    FullscreenOutlined,
    FullscreenExitOutlined,
    UserOutlined,
    SettingOutlined,
    PoweroffOutlined,
  } from '@ant-design/icons-vue';

  const { getUserName } = storeToRefs(useUserInfoStoreWithOut());
  let isFullScreen = ref(false);
  const fullScreen = () => {
    isFullScreen.value = !isFullScreen.value;
    isFullScreen.value ? document.documentElement.requestFullscreen() : document.exitFullscreen();
  };
  let visible = ref(false);
  const logout = () => {
    const userInfoStore = useUserInfoStoreWithOut();
    userInfoStore.logOut();
  };
  const openSetting = () => {
    visible.value = true;
  };
</script>

<style scoped>
  :deep(.ant-switch-handle) {
    @apply top-[3px];
  }
  :deep(.anticon) {
    vertical-align: 0 !important;
  }
  :deep(.ant-btn-dangerous) {
    @apply bg-[#ed6f6f] border-[#ed6f6f] hover:(bg-[#ed8282] border-[#ed6f6f]);
  }
  .dark-icon {
    @apply dark:(text-light-100 hover:bg-[#242424]);
  }
</style>
